import { IVFormComponent } from '../typings/v-form-component';
import { isArray } from 'lodash-es';
import { componentMap as VbenCmp, add } from '/@/components/Form/src/componentMap';
import { ComponentType } from '/@/components/Form/src/types';

import { componentMap as Cmp } from '../components';
import { Component } from 'vue';
export const defFormData = {
  // 表单配置
  schemas: {
    0: [],
    1: [],
    2: [],
  },
  client: 0,
  layout: 'horizontal',
  labelLayout: 'Grid',
  labelWidth: 100,
  labelAlign: 'right',
  size: 'default',
  isReadonly: false,
  hideRequiredMark: false,
  labelCol: {},
  wrapperCol: {},
  baseColProps: {
    span: 24,
  },
  event: {},
  btns: [],
  currentItem: {
    component: '',
    event: {},
    colProps: {
      span: 24,
    },
    componentProps: {},
  },
  activeKey: 0,
};
export const controlTypeList = [
  {
    label: '控件库',
    value: 0,
  },
];

export const componentConfigTypeList = [
  {
    label: '表单属性',
    value: 0,
  },

  {
    label: '控件属性',
    value: 1,
  },
  // {
  //   label: '控件布局',
  //   value: 2,
  // },
  {
    label: '组件属性',
    value: 3,
  },
];

const componentMap = new Map<string, Component>();

//如果有其它控件，可以在这里初始化

//注册Ant控件库
Cmp.forEach((value, key) => {
  componentMap.set(key, value);
  if (VbenCmp[key] == null) {
    add(key as ComponentType, value);
  }
});
//注册vben控件库
VbenCmp.forEach((value, key) => {
  componentMap.set(key, value);
});

export { componentMap };

/**
 * 设置自定义表单控件
 * @param {IVFormComponent | IVFormComponent[]} config
 */
export function setFormDesignComponents(config: IVFormComponent | IVFormComponent[]) {
  if (isArray(config)) {
    config.forEach((item) => {
      const { componentInstance: component, ...rest } = item;
      componentMap[item.component] = component;
      customComponents.push(Object.assign({ props: {} }, rest));
    });
  } else {
    const { componentInstance: component, ...rest } = config;
    componentMap[config.component] = component;
    customComponents.push(Object.assign({ props: {} }, rest));
  }
}

//外部设置的自定义控件
export const customComponents: IVFormComponent[] = [];

export const inputComponents: IVFormComponent[] = [
  {
    component: 'Input',
    label: '文本框',
    icon: 'fluent:text-field-24-regular',
    field: '',
    componentProps: {
      type: 'text',
      dataType: 10,
      isUnique: 0,
    },
  },
  {
    component: 'InputNumber',
    label: '数字输入框',
    icon: 'number|svg',
    field: '',
    componentProps: { style: 'width:200px' },
  },
  {
    component: 'InputTextArea',
    label: '文本域',
    icon: 'text-area|svg',
    field: '',
    componentProps: {},
  },

  // {
  //   component: 'InputCountDown',
  //   label: '倒计时输入',
  //   icon: 'clock|svg',
  //   field: '',
  //   componentProps: {},
  // },
  {
    component: 'InputPassword',
    label: '密码框',
    icon: 'lock|svg',
    field: '',
    componentProps: {},
  },
];

// https://next.antdv.com/components/transfer-cn
const transferControl = {
  component: 'Transfer',
  label: '穿梭框',
  icon: 'switch1|svg',
  field: '',
  componentProps: {
    render: (item) => item.title,
    dataSource: [
      {
        key: 'key-1',
        title: '标题1',
        description: '描述',
        disabled: false,
        chosen: true,
      },
      {
        key: 'key-2',
        title: 'title2',
        description: 'description2',
        disabled: true,
      },
      {
        key: 'key-3',
        title: '标题3',
        description: '描述3',
        disabled: false,
        chosen: true,
      },
    ],
  },
};
transferControl;

export const selectComponents: IVFormComponent[] = [
  {
    component: 'ApiSelect',
    label: '下拉选择',
    icon: 'select|svg',
    field: '',
    dataSourceType: '-1',
    dictType: '',
    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  // {
  //   component: 'Cascader',
  //   label: '级联选择',
  //   icon: 'organization|svg',
  //   field: '',
  //   componentProps: {
  //     options: [
  //       {
  //         label: '选项1',
  //         value: '1',
  //         children: [
  //           {
  //             label: '选项三',
  //             value: '1-1',
  //           },
  //         ],
  //       },
  //       {
  //         label: '选项2',
  //         value: '2',
  //       },
  //     ],
  //   },
  // },
  {
    component: 'ApiTreeSelect',
    label: '树形选择',
    icon: 'tree|svg',
    field: '',
    dataSourceType: '__system__',
    componentProps: {
      treeData: [
        {
          label: '选项1',
          value: '1',
          children: [
            {
              label: '选项三',
              value: '1-1',
            },
          ],
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  // transferControl,
  {
    component: 'RadioGroup',
    label: '单选框',
    icon: 'circle|svg',
    field: '',
    dataSourceType: '-1',
    dictType: '',
    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    component: 'CheckboxGroup',
    label: '复选框',
    icon: 'checked|svg',
    field: '',
    dataSourceType: '-1',
    dictType: '',

    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    component: 'Switch',
    label: '开关',
    icon: 'valve|svg',
    field: '',
    componentProps: {},
  },
  // {
  //   component: 'Slider',
  //   label: '滑动输入条',
  //   icon: 'slider|svg',
  //   field: '',
  //   componentProps: {},
  // },
  // {
  //   component: 'TimePicker',
  //   label: '时间选择',
  //   icon: 'clock1|svg',
  //   field: '',
  //   componentProps: {},
  // },
  {
    component: 'RangePicker',
    label: '日期范围',
    icon: 'date1|svg',
    field: '',
    componentProps: {
      style: 'width:100%',
      placeholder: ['开始日期', '结束日期'],
    },
  },
  {
    component: 'DatePicker',
    label: '日期选择',
    icon: 'date|svg',
    field: '',
    componentProps: {
      style: 'width:100%',
    },
  },
  {
    component: 'TimePicker',
    label: '时间选择',
    icon: 'clock1|svg',
    field: '',
    componentProps: {
      style: 'width:100%',
    },
  },
  {
    component: 'TimeRangePicker',
    label: '时间范围',
    icon: 'clock|svg',
    field: '',
    componentProps: {
      style: 'width:100%',
    },
  },

  // {
  //   component: 'MonthPicker',
  //   label: '月份选择',
  //   icon: 'day|svg',
  //   field: '',
  //   componentProps: {
  //     placeholder: '请选择月份',
  //   },
  // },

  // {
  //   component: 'Rate',
  //   label: '评分',
  //   icon: 'star|svg',
  //   field: '',
  //   componentProps: {},
  // },

  {
    component: 'Upload',
    label: '文件上传',
    icon: 'upload|svg',
    field: '',
    dataSourceType: '__system__',
    resourceType: 0,
    resourceCode: '',
    componentProps: {
      compType: 1,
      maxSize: 50,
      maxNumber: 1,
      accept: '.jpg,.jpeg,.png',
    },
  },
];
export const otherComponents: IVFormComponent[] = [
  {
    component: 'HChooseUser',
    label: '人员选择',
    icon: 'person|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'HChooseDept',
    label: '部门选择',
    icon: 'people|svg',
    field: '',
    componentProps: {
      type: 3,
    },
  },
  {
    component: 'HChooseRole',
    label: '角色选择',
    icon: 'role|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'HChoosePost',
    label: '岗位选择',
    icon: 'post|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'SubTable',
    label: '子表定义',
    icon: 'layout20|svg',
    field: '',
    dataSourceType: '__system__',
    componentProps: {},
  },
  {
    component: 'HFormTitle',
    label: '标题',
    icon: 'layout20|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'Map',
    label: '地图',
    icon: 'location|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'HButton',
    label: '按钮',
    icon: 'layout12|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'HButtonZOffice',
    label: '在线编辑',
    icon: 'layout13|svg',
    field: '',
    componentProps: {},
  },
];

export const otherAppComponents: IVFormComponent[] = [
  {
    component: 'HChooseUser',
    label: '人员选择',
    icon: 'person|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'HChooseDept',
    label: '部门选择',
    icon: 'people|svg',
    field: '',
    componentProps: {
      type: 3,
    },
  },
  {
    component: 'HChooseRole',
    label: '角色选择',
    icon: 'role|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'HChoosePost',
    label: '岗位选择',
    icon: 'post|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'SubTable',
    label: '子表定义',
    icon: 'layout20|svg',
    field: '',
    dataSourceType: '__system__',
    componentProps: {},
  },
  {
    component: 'ScanCode',
    label: '扫码',
    icon: 'scan|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'IdentityCard',
    label: '身份验证',
    icon: 'identity|svg',
    field: '',
    componentProps: {},
  },
  {
    component: 'Signature',
    label: '电子签名',
    icon: 'sign|svg',
    field: '',
    componentProps: {},
  },
];

export const pcCompMap = {
  inputComponents,
  selectComponents,
  otherComponents,
};

export const appCompMap = {
  inputComponents,
  selectComponents,
  otherComponents: otherAppComponents,
};

export const compMap = {
  0: pcCompMap,
  1: appCompMap,
};
// 左侧控件列表与初始化的控件属性
// props.slotName,会在formitem级别生成一个slot,并绑定当前record值
// 属性props，类型为对象，不能为undefined或是null。
export const componentAllMap = {
  0: [...inputComponents, ...selectComponents, ...otherComponents],
  1: [...inputComponents, ...selectComponents, ...otherAppComponents],
};

export const layoutComponents: IVFormComponent[] = [
  {
    field: '',
    component: 'Grid',
    label: '栅格布局',
    icon: 'icon-grid',
    componentProps: {},
    columns: [
      {
        span: 12,
        children: [],
      },
      {
        span: 12,
        children: [],
      },
    ],
    options: {
      gutter: 0,
    },
  },
];
